overflow

Internet Explorer/Internet Explorer

Netscape/Netscape

Opera/Opera

Safari/Safari

Firefox/Firefox

6.0

7.0

8.0

8.0

9.0

8.0

9.2

9.5

1.3

2.0

3.1

1.5

2.0

3.0

Частково

Частково

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Коротка інформація

CSS

CSS2

Значення за умовчанням

visible

Наслідує

Ні

Застосовується

До блокових елементів

Аналог HTML

Ні

Посилання на специфікацію

http://www.w 3.org/TR/CSS21/visufx.html#propdef - overflow

Опис

Властивість overflow управляє відображенням змісту блокового елементу, якщо воно цілком не поміщається і виходить за область заданих розмірів.

Синтаксис

overflow: auto | hidden | scroll | visible | inherit

Значення

visible Відображається увесь зміст елементу, навіть за межами встановленої висоти і ширини.

hidden Відображається тільки область усередині елементу, решту буде приховано.

scroll Завжди додаються смуги прокрутки.

auto Смуги прокрутки додаються тільки при необхідності.

inherit Наслідує значення батька.

Приклад

HTML 4.0  CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">
    <title>overflow</title>
    <style type="text/css">
      .layer {
        overflow: scroll; /* Додаємо смуги прокрутки */
        width: 300px; /* Ширина блоку */
        height: 150px; /* Висота блоку */
        padding: 5px; /* Полів навколо тексту */
        border: solid 1px black; /* Параметрів рамки */
      } 
    </style>
  </head>
  <body> 
  
    <div class="layer">
      <h2>Duis te feugifacilisi</h2>
      <p>Луцький національний техніний університет  
є одним із найкращих професійних закладів освіти у місті Луцьку. 
Найкращою з підготовки спеціалістів є кафедра професійного навчання, що займається професійною підготовкою студентів. </p>
    </div> 
  
  </body>
</html>

Результат цього прикладу показаний на мал. 1.

Мал. 1. Застосування властивості oveflow

Об'єктна модель

[window.]document.getElementById("elementID").style.overflow

Браузери

Браузер Internet Explorer підтримує також властивість overflow - x, яке відображає смугу прокрутки по горизонталі і overflow - y, воно відповідає за смугу прокрутки по вертикалі. Значення ті ж, що і для overflow.

Internet Explorer до сьомої версії включно не підтримує значення inherit.